<script setup lang="ts">
import { onMounted,ref } from 'vue'
import { useTabStore } from '@/store/tab';
import { useMainStore } from '@/store/index'
import * as echarts from 'echarts/core';
import { GridComponent,DataZoomComponent } from 'echarts/components';
import { BarChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
import { getchartInfo as getchartInfoApi } from '@/api/tab';

echarts.use([GridComponent, BarChart, CanvasRenderer,DataZoomComponent]);
const tabStore = useTabStore();
const store = useMainStore()
const townName = ref<any>([])
const townArea = ref<any>([])
const townRate = ref<any>([])
const townflag = ref<boolean>(true)
const villageName = ref<any>([])
const villageArea = ref<any>([])
const villageRate = ref<any>([])

onMounted(async() => {
  await getchartInfoApi(tabStore.townName).then(res => {
      res.forEach(element => {
        townName.value.push(element.name)
        townArea.value.push((element.area/666.67).toFixed(2))
        townRate.value.push(element.rate)
      });
      let dom = document.getElementById('container');
      let myChart = echarts.init(dom, null, {
        renderer: 'canvas',
        useDirtyRect: false
      });

      let option = {
        title: {
          text: '射阳各镇流转土地面积图'
        },
        xAxis: {
          type: 'category',
          data: townName.value,
          axisTick: {
              alignWithLabel: true
          },
          axisLabel: {
              interval:0,
              formatter: function (value, index) {
                return value + '\n{rate|' +townRate.value[index]+ '}' ;
              },
              rich: {
                rate: {
                    fontWeight : 600,
                    // fontSize: 15,
                    lineHeight:22
                }
              }
          }
        },
        yAxis: {
          type: 'value',
          name: "单位（亩）",
        },
        series: [
          {
            data: townArea.value,
            type: 'bar',
            label: {
                show: true, // 显示标签
                position: 'top', // 标签的位置
                // 可以通过 formatter 自定义标签的内容
                formatter: '{c}' // {c} 表示数据值
            }
          }
        ]
      };
      myChart.setOption(option);
      // 监听柱状图的点击事件
      myChart.on('click', function (params) {
          let loading = ElLoading.service({ text: "正在加载数据，请稍候", spinner: "el-icon-loading", background: "rgba(0, 0, 0, 0.7)", })
          townflag.value = false
          villageName.value=[]
          villageArea.value=[]
          villageRate.value=[]
          // 计算 barWidth 的值
          getchartInfoApi({townName:params.name}).then(arr => {
            arr.forEach(element => {
              villageName.value.push(element.name)
              villageArea.value.push((element.area/666.67).toFixed(2))
              villageRate.value.push(element.rate)
            });
            let barWidth = Math.min(Math.max(100 / villageName.value.length, 20), 150);
            let dom = document.getElementById('container2');
            let myChart = echarts.init(dom, null, {
              renderer: 'canvas',
              useDirtyRect: false
            });

            let option = {
              title: {
                text: params.name + '各村流转土地面积图'
              },
              xAxis: {
                type: 'category',
                data: villageName.value,
                axisTick: {
                    alignWithLabel: true
                },
                axisLabel: {
                    interval:0,
                    formatter: function (value, index) {
                      return value + '\n{rate|' + villageRate.value[index] + '}' ;
                    },
                    rich: {
                      rate: {
                          fontWeight : 600,
                          // fontSize: 15,
                          lineHeight:22
                      }
                    }
                }
              },
              yAxis: {
                type: 'value',
                name: "单位（亩）",
              },
              series: [{
                  data: villageArea.value,
                  type: 'bar',
                  barWidth: barWidth, // 设置柱子粗细
                  label: {
                      show: true, // 显示标签
                      position: 'top', // 标签的位置
                      // 可以通过 formatter 自定义标签的内容
                      formatter: '{c}' // {c} 表示数据值
                  }
              }]
            };
            myChart.setOption(option);
            loading.close()
          })
      });
  })
})

</script>

<template>
  <div class="TabbarBtn">
    <div id="third-element-introduction">
      <el-tooltip
        class="box-item"
        effect="dark"
        content="土地面积图"
        placement="left"
      >
      <div :class="store.activeBtn==5?'iconBox show':'iconBox'" @click="store.activeBtn==5?store.activeBtn=0:store.activeBtn=5">
        <img src="@/assets/image/xian.png" alt="">
      </div>
      </el-tooltip>
    </div>
  </div>
  <div :class="store.activeBtn==5? 'leftTabBox show':'leftTabBox'">
    <div v-show="townflag" id="container" style="width: 100%;height: 100%"></div>
    <div v-show="!townflag" id="container2" style="width: 100%;height: 100%;"></div>
    <span v-show="!townflag" class="gobackBtn" @click="townflag = true">返回</span>
  </div>
</template>

<style scoped>
.leftTabBox {
  position: fixed;
  bottom: -100%;
  left: 0;
  width: 100vw;
  height: 50vh;
  background-color: #fff;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  box-sizing: border-box;
  padding: 30px 20px;
}
.leftTabBox.show{
  bottom: 0vw;
}

.leftTabBox .paginationBox {
  position: absolute;
  bottom: 30px;
  left: -40vw;
  display: flex;
  text-align: center;
}

.leftTabBox.show .paginationBox {
  left: 50%;
  transform: translateX(-50%)
}

.gobackBtn {
  display: block;
  position: absolute;
  top: 40px;
  right: 40px;
  padding: 5px 15px;
  cursor: pointer;
  border: 1px solid #ccc;
  border-radius: 5px;
}
</style>
